import Image from "next/image";
import { request } from "@/utils/request";
import { PagedDataResponse, ArticleInfo } from "@/type";
import GotoDedail from "@/components/GotoDedail";

interface Props {
  articleType: number;
  children?: React.ReactNode;
}

export default async function Articles({ articleType }: Props) {
  const query = new URLSearchParams({
    type: articleType.toString(),
    page: "1",
    pageSize: "5",
    priorCreate: "true",
  }).toString();

  const res = await request<PagedDataResponse<ArticleInfo>>(
    `/articles?${query}`
  );
  const articleList = res?.data.list;

  return (
    <div className="text-base md:text-lg">
      {articleList &&
        articleList.map((item, i) => (
          <div
            key={i}
            className={`relative flex md:mx-4 my-5 md:max-h-[235px] rounded-lg p-[10px] shadow-xl slide-in-blurred-left bg-primary-card ${
              articleType === 1 && "flex-row-reverse"
            }`}
            style={{
              animationDelay: `${i * 200}ms`,
              animationFillMode: "both",
            }}
          >
            <div className="w-[60%]">
              <div className="mb-2 text-lg md:text-xl">{item.title}</div>
              <article
                className="min-h-[90px] md:min-h-[125px] lg:min-h-[100px] text-stone-400 indent-4 md:indent-10 hyphens-auto"
                lang="de"
              >
                {item.synopsis}
              </article>
              <footer className="text-sm md:text-base">
                {[1, 2, 3].map((item) => (
                  <span key={item} className="mx-1 md:mx-[6px]">
                    🏷️Vue
                  </span>
                ))}
              </footer>
            </div>
            <div className="relative overflow-hidden w-[40%] rounded-lg mx-1 md:mx-2">
              {item.cover_img_url && (
                <Image
                  src={item.cover_img_url}
                  alt="ReindeerのRoom article image"
                  fill
                  loading="lazy"
                  sizes="100%"
                  quality={100}
                  style={{
                    objectFit: "cover",
                    objectPosition: "center",
                  }}
                />
              )}
            </div>
            <GotoDedail articleId={item.article_id} />
          </div>
        ))}
    </div>
  );
}
